<template>
  <view class="container">
    <!-- 登录头部 -->
    <view class="login-header">
      <view class="logo-container">
        <image class="logo" src="/static/logo.png" mode="aspectFill"></image>
      </view>
      <text class="title">青理乐送</text>
      <text class="subtitle">便捷校园生活，美食随时送达</text>
    </view>

    <!-- 登录方式 -->
    <view class="login-methods">
      <!-- 微信登录 -->
      <button class="login-btn wechat" @click="wechatLogin">
        <text class="btn-icon">🔒</text>
        <text class="btn-text">微信一键登录</text>
      </button>

      <!-- 手机号登录 -->
      <button class="login-btn phone" @click="showPhoneLogin" style="display: none;">
        <text class="btn-icon">📱</text>
        <text class="btn-text">手机号登录</text>
      </button>
    </view>

    <!-- 手机号登录弹窗 -->
    <uni-popup ref="phoneLoginPopup" type="center">
      <view class="phone-login-popup">
        <view class="popup-header">
          <text class="popup-title">手机号登录</text>
          <text class="close-btn" @click="closePhoneLogin">×</text>
        </view>

        <view class="form-item">
          <input class="input" type="number" maxlength="11" placeholder="请输入手机号" v-model="phone" />
        </view>

        <view class="form-item code-item">
          <input class="input" type="number" maxlength="6" placeholder="请输入验证码" v-model="code" />
          <button class="code-btn" :disabled="codeBtnDisabled" @click="sendCode">{{ codeBtnText }}</button>
        </view>

        <button class="submit-btn" @click="phoneLoginSubmit">登录</button>
      </view>
    </uni-popup>
    <view class="agreement">
      <text>登录即代表您已同意</text>
      <text class="link" @click="goToAgreement('user')">《用户协议》</text>
      <text>和</text>
      <text class="link" @click="goToAgreement('privacy')">《隐私政策》</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onBeforeUnmount } from 'vue'
import { useUserStore } from '@/store/user.js'
import uniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue'

// 响应式状态
const phone = ref('')
const code = ref('')
const countdown = ref(0)
let timer = null
const phoneLoginPopup = ref(null)

// 计算属性
/**
 * 验证码按钮是否禁用
 */
const codeBtnDisabled = computed(() => {
  return countdown.value > 0 || phone.value.length !== 11
})

/**
 * 验证码按钮显示文本
 */
const codeBtnText = computed(() => {
  return countdown.value > 0 ? `${countdown.value}s后重新获取` : '获取验证码'
})

/**
 * 微信登录处理
 */
const wechatLogin = async () => {
  try {
    uni.showLoading({
      title: '登录中'
    })

    const userStore = useUserStore()
    await userStore.login()

    uni.hideLoading()
    uni.showToast({
      title: '登录成功',
      icon: 'success'
    })

    // 登录成功后跳转到首页，延迟时间考虑新用户欢迎词显示时间
    setTimeout(() => {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }, 3000) // 3秒欢迎词显示
  } catch (error) {
    uni.hideLoading()
    console.error('登录失败:', error)
    uni.showToast({
      title: '登录失败，请重试',
      icon: 'none'
    })
  }
}

/**
 * 显示手机号登录弹窗
 */
const showPhoneLogin = () => {
  phoneLoginPopup.value.open()
}

/**
 * 关闭手机号登录弹窗
 */
const closePhoneLogin = () => {
  phoneLoginPopup.value.close()
}

/**
 * 发送验证码
 */
const sendCode = () => {
  if (phone.value.length !== 11) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }

  // 模拟发送验证码
  uni.showLoading({
    title: '发送中'
  })

  setTimeout(() => {
    uni.hideLoading()

    uni.showToast({
      title: '验证码已发送',
      icon: 'success'
    })

    // 开始倒计时
    countdown.value = 60
    timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  }, 1000)
}

/**
 * 手机号登录提交
 */
const phoneLoginSubmit = () => {
  if (phone.value.length !== 11) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'none'
    })
    return
  }

  if (code.value.length !== 6) {
    uni.showToast({
      title: '请输入6位验证码',
      icon: 'none'
    })
    return
  }

  // 模拟验证
  uni.showLoading({
    title: '登录中'
  })

  setTimeout(() => {
    uni.hideLoading()

    // 登录成功
    const userStore = useUserStore()
    userStore.login()

    uni.showToast({
      title: '登录成功',
      icon: 'success'
    })

    // 关闭弹窗
    closePhoneLogin()

    // 返回上一页或首页，延迟时间考虑新用户欢迎词显示时间
    setTimeout(() => {
      uni.navigateBack({
        fail: () => {
          uni.switchTab({
            url: '/pages/index/index'
          })
        }
      })
    }, 3000) // 3秒欢迎词显示
  }, 1500)
}

/**
 * 跳转到协议页面
 * @param {string} type - 协议类型：user-用户协议，privacy-隐私政策
 */
const goToAgreement = (type) => {
  const path = type === 'user' ? '/pages/user/user-agreement' : '/pages/user/privacy-policy'
  uni.navigateTo({
    url: path
  })
}

// 组件销毁前清除定时器
onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-image: linear-gradient(135deg, #fff8f8 0%, #fff5f7 50%, #fff8fa 100%);
  padding: 60rpx 40rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80rpx;
  margin-bottom: 100rpx;

.logo-container {
    width: 200rpx;
    height: 200rpx;
    margin-top: 80rpx;
    margin-bottom: 40rpx;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }


  .title {
    font-size: 48rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 20rpx;
    letter-spacing: 2rpx;
  }

  .subtitle {
    font-size: 28rpx;
    color: #666;
    letter-spacing: 1rpx;
  }
}

.login-methods {
  width: 100%;
  margin-top: 60rpx;

  .login-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 90rpx;
    border-radius: 45rpx;
    margin-bottom: 40rpx;
    font-size: 32rpx;
    font-weight: 500;
    box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.1);
    border: none;

    .btn-icon {
      margin-right: 16rpx;
      font-size: 36rpx;
    }

    &.wechat {
      background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
      color: #fff;

      &:active {
        background: linear-gradient(135deg, #ff8a8e 0%, #ff5b5b 100%);
      }
    }

    &.phone {
      background: #fff;
      color: #333;
      border: 1rpx solid #eee;

      &:active {
        background: #f9f9f9;
      }
    }
  }
}

.phone-login-popup {
  width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  padding: 40rpx;
  position: relative;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40rpx;

    .popup-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }

    .close-btn {
      font-size: 48rpx;
      color: #999;
      line-height: 1;
      padding: 10rpx;

      &:active {
        color: #666;
      }
    }
  }

  .form-item {
    margin-bottom: 30rpx;

    .input {
      width: 100%;
      height: 90rpx;
      background: #f8f8f8;
      border-radius: 45rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      color: #333;
      box-sizing: border-box;
    }

    &.code-item {
      display: flex;
      align-items: center;

      .input {
        flex: 1;
        margin-right: 20rpx;
      }

      .code-btn {
        width: 220rpx;
        height: 90rpx;
        background: #ff6b6b;
        color: #fff;
        border-radius: 45rpx;
        font-size: 26rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        white-space: nowrap;

        &:disabled {
          background: #ffb6b6;
        }
      }
    }
  }

  .submit-btn {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(135deg, #ff9a9e 0%, #ff6b6b 100%);
    color: #fff;
    border-radius: 45rpx;
    font-size: 32rpx;
    font-weight: 500;
    margin-top: 40rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 6rpx 16rpx rgba(255, 107, 107, 0.2);
    border: none;

    &:active {
      background: linear-gradient(135deg, #ff8a8e 0%, #ff5b5b 100%);
    }
  }
}
.agreement {
    text-align: center;
    font-size: 24rpx;
    color: #999;

    .link {
      color: #ff6b6b;

      &:active {
        opacity: 0.8;
      }
    }
  }
</style>